import { useEffect, useState } from 'react';
import './cubox-houdini.css';

/**
 * CuboxHoudini - A React component that uses CSS Houdini Paint API
 * for cubic bezier rounded corners based on the cuboxPath system
 */
const CuboxHoudini = ({
  // Corner properties
  cornerRadius = 20,
  cornerSharpness = 1,
  
  // Individual corner overrides
  cornerRadiusTopLeft,
  cornerRadiusTopRight,
  cornerRadiusBottomRight,
  cornerRadiusBottomLeft,
  
  cornerSharpnessTopLeft,
  cornerSharpnessTopRight,
  cornerSharpnessBottomRight,
  cornerSharpnessBottomLeft,
  
  // Style properties
  backgroundColor = '#343434',
  borderWidth = 0,
  borderColor = 'transparent',
  borderStyle = 'solid',
  
  // Component props
  className = '',
  style = {},
  children,
  
  // Event handlers
  onClick,
  onMouseEnter,
  onMouseLeave,
  
  ...props
}) => {
  const [isWorkletLoaded, setIsWorkletLoaded] = useState(false);

  useEffect(() => {
    // Load the paint worklet
    const loadWorklet = async () => {
      if ('CSS' in window && 'paintWorklet' in CSS) {
        try {
          await CSS.paintWorklet.addModule(new URL('./cubox-paint.js', import.meta.url));
          setIsWorkletLoaded(true);
        } catch (error) {
          console.warn('Failed to load cubox paint worklet:', error);
          // Fallback to regular border-radius
          setIsWorkletLoaded(false);
        }
      } else {
        console.warn('CSS Paint API not supported, falling back to border-radius');
        setIsWorkletLoaded(false);
      }
    };

    loadWorklet();
  }, []);

  // Build CSS custom properties object
  const customProperties = {
    '--corner-radius': cornerRadius,
    '--corner-sharpness': cornerSharpness,
  };

  // Add individual corner properties if specified
  if (cornerRadiusTopLeft !== undefined) {
    customProperties['--corner-radius-top-left'] = cornerRadiusTopLeft;
  }
  if (cornerRadiusTopRight !== undefined) {
    customProperties['--corner-radius-top-right'] = cornerRadiusTopRight;
  }
  if (cornerRadiusBottomRight !== undefined) {
    customProperties['--corner-radius-bottom-right'] = cornerRadiusBottomRight;
  }
  if (cornerRadiusBottomLeft !== undefined) {
    customProperties['--corner-radius-bottom-left'] = cornerRadiusBottomLeft;
  }
  
  if (cornerSharpnessTopLeft !== undefined) {
    customProperties['--corner-sharpness-top-left'] = cornerSharpnessTopLeft;
  }
  if (cornerSharpnessTopRight !== undefined) {
    customProperties['--corner-sharpness-top-right'] = cornerSharpnessTopRight;
  }
  if (cornerSharpnessBottomRight !== undefined) {
    customProperties['--corner-sharpness-bottom-right'] = cornerSharpnessBottomRight;
  }
  if (cornerSharpnessBottomLeft !== undefined) {
    customProperties['--corner-sharpness-bottom-left'] = cornerSharpnessBottomLeft;
  }

  const combinedStyle = {
    ...customProperties,
    backgroundColor: isWorkletLoaded ? backgroundColor : 'transparent',
    borderWidth: `${borderWidth}px`,
    borderColor,
    borderStyle,
    // Fallback border-radius for unsupported browsers
    borderRadius: isWorkletLoaded ? undefined : `${cornerRadius}px`,
    ...style,
  };

  const baseClassName = borderWidth > 0 ? 'cubox-houdini-outlined' : 'cubox-houdini';

  return (
    <div
      className={`${baseClassName} ${className}`}
      style={combinedStyle}
      onClick={onClick}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      {...props}
    >
      {children}
    </div>
  );
};

export default CuboxHoudini;
